<script setup>
import { getDoctorListApi, searchDoctorApi } from '@/api/QA.js'
import { onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()
const doctorList = ref([])
/**
 *  获取医生列表
 * @return {Promise<void>}
 */
const getDoctorList = async () => {
  if (route.query.keyword) {
    const res = await searchDoctorApi(route.query.keyword)
    doctorList.value = res.data
    return
  }
  const res = await getDoctorListApi()
  doctorList.value = res.data
}
onMounted(() => getDoctorList())
const goBack = () => {
  router.back()
}
watch(route, () => {
  getDoctorList()
})
</script>

<template>
  <div class="QA">
    <div class="QA-box">
      <div class="QA-title" style="margin-bottom: 20px;align-self: flex-start">
        <el-button color="#39c5bb" icon="Back" plain round style="font-size: 12px" @click="goBack">
          返回
        </el-button>
        <el-text :size="'large'" style="margin-left: 20px;color: #39c5bb">医师列表</el-text>
      </div>
      <div v-for="item in doctorList" :key="item.hid" class="QA-box-item">
        <div class="left">
          <el-image :src="item.faceImg" fit="cover" style="width: 50px;height: 50px"></el-image>
          <h5>{{ item.name }}</h5>
          <p>{{ item.office }}</p>
        </div>
        <div class="right">
          <p>手机：{{ item.phone }}</p>
          <p>地址：{{ item.address }}</p>
          <p>简述：{{ item.mess }}</p>
        </div>
      </div>
      <div style="color: #cccccc;margin-top: 30px">没有更多数据了哟~</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.QA {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 30px;

  &-box {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-item {
      width: 100%;
      border-top: #cccccc solid 1px;
      display: flex;
      padding: 10px 20px;
      justify-content: space-between;
      gap: 10%;

      .left {
        display: flex;
        flex: 3;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      .right {
        flex: 7;
        display: flex;
        flex-direction: column;
        //align-items: center;
        justify-content: center;
        gap: 10px;

        p {
          &:before {
            content: "l";
            color: #39c5bb;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>